<template>
  <view class="w-full max-w-[750rpx] min-h-screen bg-[#f5f7fa] mx-auto flex flex-col">
    <!-- 聊天头部 -->
    <view class="bg-[#2196F3] text-white px-[32rpx] py-[24rpx] flex items-center justify-between rounded-b-[32rpx]">
      <text class="text-[36rpx] font-semibold">聊天助手</text>
      <view class="bg-white bg-opacity-20 rounded-[32rpx] p-[4rpx] flex">
        <view 
          v-for="(tab, index) in tabs" 
          :key="index"
          class="px-[24rpx] py-[8rpx] rounded-[24rpx] text-[26rpx] transition-all duration-300 cursor-pointer"
          :class="{ 'bg-white text-[#2196F3] font-medium': activeTab === index, 'text-white': activeTab !== index }"
          @click="switchTab(index)"
        >
          {{ tab }}
        </view>
      </view>
    </view>
    
    <!-- 聊天消息区域 -->
    <view class="flex-1 px-[20rpx] py-[16rpx] overflow-y-auto bg-white rounded-t-[32rpx] mt-[-16rpx] pb-[120rpx]">
      <!-- 用户消息标签页内容 -->
      <view v-if="activeTab === 0">
        <!-- 静态消息（可选，实际可删） -->
        <view class="flex justify-center mb-[24rpx]">
          <view class="bg-[#f5f5f5] text-[#666] text-[24rpx] px-[24rpx] py-[10rpx] rounded-[24rpx]">
            今天 14:30
          </view>
        </view>
        
        <!-- 动态消息列表 -->
        <view v-for="(message, index) in messageList" :key="index" class="mb-[24rpx]">
          <!-- 系统消息 -->
          <view v-if="message.type === 'system'" class="flex justify-center">
            <view class="bg-[#f5f5f5] text-[#666] text-[24rpx] px-[24rpx] py-[10rpx] rounded-[24rpx] max-w-[70%] text-center">
              {{ message.content }}
            </view>
          </view>
          
          <!-- 用户消息 -->
          <view v-else-if="message.type === 'user'" class="flex justify-start">
            <view class="flex w-full justify-end">
              <view class="max-w-[70%] text-right mr-[12rpx]">
                <text class="text-[26rpx] font-semibold text-[#2196F3] mb-[6rpx] block">{{ message.user }}</text>
                <view class="bg-[#2196F3] text-white px-[20rpx] py-[16rpx] rounded-[28rpx] rounded-tr-[6rpx] text-[28rpx] leading-[1.5] break-words">
                  {{ message.content }}
                </view>
              </view>
              <view class="w-[64rpx] h-[64rpx] rounded-full bg-[#2196F3] text-white flex items-center justify-center font-bold text-[26rpx] ml-[8rpx] mr-0" style="margin-right:0;">
                {{ message.avatar }}
              </view>
            </view>
          </view>
          
          <!-- 客服消息 -->
          <view v-else-if="message.type === 'assistant'" class="flex">
            <view class="w-[64rpx] h-[64rpx] rounded-full bg-[#e3f2fd] text-[#2196F3] flex items-center justify-center font-bold text-[26rpx] mr-[12rpx]">
              {{ message.avatar }}
            </view>
            <view class="max-w-[70%]">
              <text class="text-[26rpx] font-semibold text-[#2196F3] mb-[6rpx] block">{{ message.user }}</text>
              <view class="bg-[#e3f2fd] text-[#333] px-[20rpx] py-[16rpx] rounded-[28rpx] rounded-tl-[6rpx] text-[28rpx] leading-[1.5] break-words">
                {{ message.content }}
              </view>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 系统消息标签页内容 -->
      <view v-else-if="activeTab === 1">
        <view v-for="(message, index) in systemMessageList" :key="index" class="mb-[24rpx]">
          <view class="flex justify-center">
            <view class="bg-[#f5f5f5] text-[#666] text-[24rpx] px-[24rpx] py-[10rpx] rounded-[24rpx] max-w-[70%] text-center">
              {{ message.content }}
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 聊天输入区域fixed到底部tabbar上方 -->
    <view class="fixed left-0 right-0 bottom-[100rpx] z-50 box-border px-[20rpx] py-[12rpx] bg-white border-t border-gray-200 flex items-center safe-bottom pb-[32rpx] w-full" style="max-width: 750rpx; margin: 0 auto;">
      <textarea 
        v-model="inputMessage"
        class="flex-1 border-2 border-blue-500 rounded-[32rpx] px-[24rpx] py-[14rpx] text-[28rpx] outline-none resize-none min-h-[64rpx] max-h-[160rpx] transition-all duration-300 bg-gray-50"
        :class="{ 'shadow-[0_0_0_4rpx_rgba(33,150,243,0.15)]': isInputFocused }"
        placeholder="输入消息..."
        @focus="isInputFocused = true"
        @blur="isInputFocused = false"
        @input="adjustTextareaHeight"
      />
      <view 
        class="w-[56rpx] h-[56rpx] rounded-full bg-blue-500 text-white flex items-center justify-center ml-[12rpx] transition-all duration-300 active:scale-95 cursor-pointer"
        @click="sendMessage"
      >
        <IconFont name="paper-plane" class="text-[32rpx]" />
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import Taro from '@tarojs/taro'
import { IconFont } from '@nutui/icons-vue-taro'

// 标签页数据
const tabs = ref(['用户消息', '系统消息'])
const activeTab = ref(0)

// 输入相关
const inputMessage = ref('')
const isInputFocused = ref(false)

// 消息列表
const messageList = ref([
  {
    type: 'system',
    content: '今天 14:35'
  },
  {
    type: 'user',
    user: '我',
    avatar: '我',
    content: '我想了解一下企业版的具体功能'
  },
  {
    type: 'assistant',
    user: '助手',
    avatar: '助',
    content: '企业版包含所有基础版和专业版功能，还提供专属客服、定制化开发、API接口等高级功能。'
  }
])

// 系统消息列表
const systemMessageList = ref([
  {
    type: 'system',
    content: '今天 14:30'
  },
  {
    type: 'system',
    content: '系统维护通知：今晚22:00-24:00进行系统升级，期间可能影响部分功能使用'
  },
  {
    type: 'system',
    content: '今天 14:32'
  },
  {
    type: 'system',
    content: '新功能上线：智能客服助手已上线，为您提供更优质的服务体验'
  },
  {
    type: 'system',
    content: '今天 14:35'
  },
  {
    type: 'system',
    content: '你发布的任务已经有人接单了'
  }
])

// 切换标签
const switchTab = (index: number) => {
  activeTab.value = index
  Taro.showToast({
    title: `切换到${tabs.value[index]}`,
    icon: 'none',
    duration: 1500
  })
}

// 调整文本框高度
const adjustTextareaHeight = () => {
  // 在 Taro 中，textarea 会自动调整高度
  console.log('调整文本框高度')
}

// 发送消息
const sendMessage = () => {
  const message = inputMessage.value.trim()
  if (!message) {
    Taro.showToast({
      title: '请输入消息内容',
      icon: 'none',
      duration: 1500
    })
    return
  }
  
  // 如果当前在系统消息标签页，切换到用户消息标签页
  if (activeTab.value === 1) {
    activeTab.value = 0
  }
  
  // 添加用户消息
  messageList.value.push({
    type: 'user',
    user: '我',
    avatar: '我',
    content: message
  })
  
  // 清空输入框
  inputMessage.value = ''
  
  // 模拟客服回复
  setTimeout(() => {
    messageList.value.push({
      type: 'assistant',
      user: '助手',
      avatar: '助',
      content: '感谢您的咨询，我们会尽快为您处理。'
    })
    
    // 滚动到底部
    Taro.pageScrollTo({
      scrollTop: 9999,
      duration: 300
    })
  }, 1000)
  
  Taro.showToast({
    title: '消息已发送',
    icon: 'success',
    duration: 1000
  })
}

// 页面加载完成
onMounted(() => {
  console.log('消息页面加载完成')
})
</script>